<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab {
            width: 100px;
            height: 500px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            flex-direction: column;
            position: fixed;
        }

        .tab>div {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: aquamarine;
        }

        .content {
            width: 300px;
            position: relative;
            top: 0px;
            left: 200px;
        }

        li {
            width: 200px;
            margin: 20px;
            list-style: none;
            background-color: rgb(82, 232, 207);
            padding: 20px;
        }

        li>img {
            width: 200px;
            height: 180px;

        }

        li>button {
            margin-left: 100px;
        }

        .gong {
            height: 20px;
            padding: 10px;
            position: fixed;
            top: 0;
            left: 200px;
            background-color: lightpink;
            z-index: 99;
        }

        .gao {
            width: 500px;
            height: 200px;
            background-color: rgba(228, 78, 135, 0.442);
            position: fixed;
            bottom: 0;
            left: 200px;
            padding: 10px;
            display: none;
        }

        .gao>h3 {
            width: 500px;
            text-align: center;
        }

        .gao>button {
            margin-left: 210px;
            margin-top: 50px;
        }

        .xiang {
            background-color: rgba(160, 117, 215, 0.663);
            width: 300px;
            height: 400px;
            position: fixed;
            top: 200px;
            left: 200px;
            border-radius: 10px;
            display: none;
        }

        .shopping_car {
            background-color: antiquewhite;
            width: 500px;
        }
    </style>
</head>

<body>
    <div class="gong">公告：客官适度点餐光盘行动拒绝浪费，使用公勺公筷</div>
    <div class="tab">
        <div>烤鱼</div>
        <div>虾锅</div>
        <div>烧烤</div>
        <div>啤酒</div>
    </div>
    <div class="content">
        <ul>

        </ul>
    </div>
    <div class="xiang"></div>
    <div class="gao">
        <h3>商家公告</h3>
        <p>爱丁堡和飓风噶十几个吧回复就卡怪不放假咯改变客户发基本规范和</p>
        <button onclick="know()">知道了</button>
    </div>
    <div class="shopping_car">

    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var arr = [{
            pid: 0,
            id: 0,
            name: "青花椒烤鱼",
            price: 79,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.pCPKYhMYmXOwlm2FLMPzMAHaF7?w=233&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 0,
            id: 1,
            name: "咖咖给喱烤鱼",
            price: 79,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.5Y4kDQ2HDHRi1D9kL1_anAHaE8?w=260&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 0,
            id: 2,
            name: "酱香烤鱼",
            price: 79,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.-eZZUh48uJBF1x9mE-XTOgHaE9?w=244&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 1,
            id: 3,
            name: "蒜你香专薯大虾锅",
            price: 89,
            num: 1,
            img: "https://ts3.tc.mm.bing.net/th/id/OIP-C.HF7S2vHYhI7SBJecihi2QgHaE8?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 1,
            id: 4,
            name: "辣么麻专薯大虾锅",
            price: 89,
            num: 1,
            img: "https://ts3.tc.mm.bing.net/th/id/OIP-C.fBnvCyMBmaief1NvkhlkegHaE8?w=305&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 2,
            id: 5,
            name: "大叉烤肉",
            price: 29,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.iOfFvtk6UJJ0CxyK4QGPFQHaEJ?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 2,
            id: 6,
            name: "烤鱼豆腐",
            price: 12,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.318W8l7xjq8t9DuxuLUWoAHaKI?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 2,
            id: 7,
            name: "烤鸡腿",
            price: 5,
            num: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.qgxAMXgSAk8pkpYpyUTkAwHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }, {
            pid: 3,
            id: 8,
            name: "雪花超级勇闯天涯",
            price: 9,
            num: 1,
            img: "https://tse1-mm.cn.bing.net/th/id/OIP-C.3uQgjV2p4k4VpYRJ7IEGMQHaHa?w=181&h=182&c=7&r=0&o=5&dpr=1.2&pid=1.7"
        }, {
            pid: 3,
            id: 9,
            name: "大罐崂山啤酒",
            price: 7,
            num: 1,
            img: "https://t00img.yangkeduo.com/goods/images/2020-05-20/9fe0945a-51bc-4f10-b7d8-7234a4472a01.jpeg"
        }, {
            pid: 3,
            id: 10,
            name: "原浆小麦果汁",
            price: 10,
            num: 1,
            img: "https://ts4.tc.mm.bing.net/th/id/OIP-C.3QyuIE7IvV5FMoaXSTyg8AHaKe?w=210&h=297&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"
        }]

        //渲染
        arr.forEach(item => {
            if (item.pid == 0

            ) {
                $(".content>ul").append(`
                    <li onclick="add(${item.id})">
                        <img src="${item.img}">
                        <p>${item.name}</p>
                        <span>￥${item.price}</span><button onclick="qing(${item.id})">详情</button>
                    </li>`)
            }
        })
        $(".tab div").on("click", () => {
            $(".content>ul").html("")
            arr.forEach(item => {
                if ($(event.target).index() == item.pid) {
                    $(".content>ul").append(`
                    <li onclick="add(${item.id})">
                        <img src="${item.img}">
                        <p>${item.name}</p>
                        <span>￥${item.price}</span><button onclick="qing(${item.id})">详情</button>
                    </li>`)
                }
            })
        })

        //公告详情
        $("div:first").on("click", () => {
            $(".gao").css("display", "block")
        })

        function know() {
            $(".gao").css("display", "none")
        }

        //菜品详情
        function qing(id) {
            $('.xiang').css("display", "block")
            arr.find(item => {
                if (item.id == id) {
                    $(".xiang").html(`
                        <img src="${item.img}">
                        <p>${item.name}</p>
                        <span>￥${item.price}</span><br><button onclick="off()">关闭</button>
                    `)

                }
            })
        }
        function off() {
            $('.xiang').css("display", "none")
        }

        var arr1 = []
        //添加
        function add(id) {
            var shop = arr.find(item => item.id == id)
            arr1.push({
                img:shop.img,
                name: shop.name,
                price: shop.price,
                num: 1
            })
        }

        // arr1.forEach(item => {
        //     $(".shopping_car").append(`
        //         <div>
        //             <img src="${item.img}">
        //             <p>${item.name}</p>
        //             <span>￥${item.price}</span>
        //             <p>${item.num}</p>
        //         </div>`)
        // })
    </script>
</body>

</html>